import React, { useState, useEffect } from 'react';
import { Row, Col, Select, Button, Tooltip, message, } from 'antd';
import { MODEL_SOURCE } from 'src/utils/constant';
import Modal from 'src/components/Modal';
import services from 'src/services/api';
import Publish from './Publish';
import './modelItem.less';
import { IconFont } from '../../../../components/IconFont';
import { APIUrlNoVersion } from '../../../../services/createServices';

export default function ModelItem(props) {
  const [data, setData] = useState(props.dataSource);
  useEffect(() => {
    setData(props.dataSource);
  }, [props.dataSource]);
  // const newData = data
  //删除
  function del(row, txt) {
    Modal.open({
      title: '',
      width: '360px',
      isConfirm: true,
      content: <p>{`确定要删除${txt}么`}?</p>,
      isOkBtn: true,
      isCancelBtn: true,
      ok: () => {
        const params = {
          model_code: row.model_code,
          model_version: row.model_version,
        };
        services.repositoryModel.delete(params).then((data) => {
          if (data.code === 0) {
            message.success(data.msg);
            props.queryList();
            Modal.close();
          } else {
            message.error(data.msg);
          }
        });
      },
      cancel: () => {
        Modal.close();
      },
    });
  }

  // function delAll(row) {
  //   Modal.open({
  //     title: '',
  //     width: '360px',
  //     isConfirm: true,
  //     content: <p>{`确定要删除该模型么`}?</p>,
  //     isOkBtn: true,
  //     isCancelBtn: true,
  //     ok: () => {
  //       const params = {
  //         model_code: row.model_code,
  //       };
  //       services.repositoryModel.delete(params).then((data) => {
  //         if (data.code === 0) {
  //           message.success(data.msg);
  //           props.queryList();
  //           Modal.close();
  //         } else {
  //           message.error(data.msg);
  //         }
  //       });
  //     },
  //     cancel: () => {
  //       Modal.close();
  //     },
  //   });
  // };
  //部署
  function publish(data) {
    Modal.open({
      title: '模型部署配置',
      width: '600px',
      content: <Publish {...props} closeModal={() => Modal.close()} dataSource={data} />,
      isOkBtn: false,
      isCancelBtn: false,
    });
  }

  // 下载
  function download(data) {
    const urls = `${APIUrlNoVersion}/v2/model-repository/model-download?model_code=${data.model_code}&model_version=${data.model_version}`
    window.open(urls, '_black');
    // const params = {
    //   model_code: data.model_code,
    //   model_version: data.model_version,
    // };
    // services.repositoryModel.downLoad(params).then((res) => {
    //   if (!res.code) {
    //     let fileName = '';
    //     if (res.data.file_type.lastIndexOf('.') === -1) {
    //       fileName = 'model.' + res.data.file_type;
    //     } else {
    //       fileName = res.data.file_type;
    //     }
    //     const blobs = new Blob([res.data.content]);
    //     let blobUrl = window.URL.createObjectURL(blobs);
    //     let aElement = document.createElement('a'); //获取a标签元素
    //     aElement.style.display = 'none';
    //     aElement.href = blobUrl; //设置a标签路径
    //     aElement.download = fileName;
    //     aElement.click();
    //   } else {
    //     message.error(res.msg);
    //   }
    // });
  }
  //切换版本
  function changeVersion(value) {
    // data.model_version = value;
    // setData(data);
    const params = {
      model_code: data.model_code,
      model_version: value,
    };
    services.repositoryModel.detail(params).then((res) => {
      if (res.code === 0) {
        res.data.model_versions = (res.data.model_versions && res.data.model_versions.length) || data.model_versions;
        setData(res.data);
      }
    });
  }

  return (
    <div className='model-item'>
      <div className='model-item-hd'>
        <Row type='flex' justify='space-between' align='middle'>
          <Col span={12}>
            <Tooltip title={data.model_code}>
              <div className='model-text'>{data.model_code}</div>
            </Tooltip>
          </Col>
          <Col span={4}>
            <Select value={data.model_version} onChange={(value) => changeVersion(value)}>
              {data.model_versions.map((it, idx) => (
                <Select.Option value={it.model_version} key={idx}>
                  {it.model_version}
                </Select.Option>
              ))}
            </Select>
          </Col>
          <Col>
            <Button
              type='link'
              onClick={() => del(data, `当前${data.model_version}版本`)}
              style={{ padding: 0, margin: '0 10px' }}
              disabled={data.source_type === 0}
            >
              <IconFont type='iconrubbish-gray' />
            </Button>
            {/* <Dropdown
              overlay={() => (
                <Menu>
                  <Menu.Item onClick={() => delAll(data)}>删除全部</Menu.Item>
                </Menu>
              )}
              placement={'bottomRight'}
            >
              <Icon type='down' />
            </Dropdown> */}
          </Col>
        </Row>
      </div>
      <div className='model-item-con'>
        <Button type='primary' onClick={() => publish(data)}>
          部署
        </Button>
        <Button onClick={() => download(data)} style={{ marginLeft: '10px' }}>
          下载
        </Button>
      </div>
      <div className='model-item-ft'>
        <ul>
          <li>
            <Row type='flex'>
              <Col>来源：</Col>
              <Col span={16}>{MODEL_SOURCE[data.source_type]}</Col>
            </Row>
          </li>
          <li>
            <Row type='flex'>
              <Col>创建人：</Col>
              <Col span={16}>
                <Tooltip title={data.create_user}>
                  <div className='model-text'>{data.create_by}</div>
                </Tooltip>
              </Col>
            </Row>
          </li>
          <li>
            <Row type='flex'>
              <Col>创建时间：</Col>
              <Col span={16}>{data.create_time} </Col>
            </Row>
          </li>
        </ul>
      </div>
    </div>
  );
}
